<template>
  <div>

    <!-- 注册成功提示框 -->
    <div v-if="showSuccessMessage" class="success-message">
      注册成功！即将跳转到登录页面...
    </div>
    <!-- 注册表单 -->
    <form @submit.prevent="handleRegisterSubmit">
      <label for="username">用户名:</label>
      <input
          type="text"
          id="username"
          v-model="username"
          placeholder="请输入用户名..."
          @focus="$emit('onUsernameFocus')"
      />
      <label for="password">密码:</label>
      <input
          type="password"
          id="password"
          v-model="password"
          placeholder="请输入密码..."
          @focus="$emit('onPasswordFocus')"
      />
      <label for="confirmPassword">确认密码:</label>
      <input
          type="password"
          id="confirmPassword"
          v-model="confirmPassword"
          placeholder="请确认密码..."
          @click="$emit('onPasswordFocus')"
      />

      <!-- 注册按钮 -->
      <BaseButton
          variant="primary"
          size="medium"
          :disabled="isSubmitting"
          aria-label="注册按钮"
          @clickButton="handleRegisterSubmit"
      >
        注册
      </BaseButton>

      <!-- 返回登录按钮 -->
      <BaseButton
          variant="secondary"
          size="medium"
          outline
          aria-label="返回登录按钮"
          @clickButton="navigateToLogin"
      >
        返回登录
      </BaseButton>
    </form>

  </div>
</template>

<script setup>
import { ref } from "vue";
import BaseButton from "@/components/BaseButton.vue"; // 导入 BaseButton 组件
import { useRouter } from "vue-router";
import axios from "@/axios.js"; // 导入 axios

// 定义响应式数据
const username = ref("");
const password = ref("");
const confirmPassword = ref("");
const isSubmitting = ref(false); // 控制按钮禁用状态
const showSuccessMessage = ref(false); // 控制成功消息显示
const router = useRouter();

// 注册表单提交方法
const handleRegisterSubmit = async () => {
  // 检查是否输入用户名和密码
  if (!username.value.trim() || !password.value.trim()) {
    alert("用户名和密码不能为空！");
    return;
  }

  // 校验密码和确认密码是否一致
  if (password.value !== confirmPassword.value) {
    alert("密码和确认密码不一致！");
    return;
  }

  isSubmitting.value = true; // 禁用按钮，防止重复提交

  // 准备要发送的数据
  const userData = {
    username: username.value,
    password: password.value,
  };

  try {
    // 发送注册请求
    const response = await axios.post("/user/register", userData, {
      headers: {
        "Content-Type": "application/json",
      },
    });

    // 检查返回的 code 是否为 0
    if (response.data && response.data.code === 0) {
      console.log("注册成功:", response.data);

      // 显示成功提示框
      showSuccessMessage.value = true;

      // 等待 2 秒后跳转
      setTimeout(() => {
        router.push("/");
      }, 2000);
    } else {
      console.error("注册失败:", response.data);
      alert(response.data.message || "注册失败，请稍后再试");
    }
  } catch (error) {
    console.error("注册失败:", error);
    alert("注册失败，请稍后再试");
  } finally {
    isSubmitting.value = false; // 恢复按钮状态
  }
};



// 点击返回登录按钮时触发
const navigateToLogin = () => {
  router.push("/");
};
</script>

<style scoped>
/* 与 LoginForm.vue 相同的样式 */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

form {
  width: 23.75em;
  padding: 3em 1.5em;
  background-color: #86db7691;
  position: relative;
  transform: translate(-50%);
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0.5em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

form label {
  display: block;
  margin-bottom: 0.2em;
  font-weight: 600;
  color: #2e0d30;
}

form input {
  font-size: 0.95em;
  font-weight: 400;
  color: #3f3554;
  padding: 0.3em;
  border: none;
  border-bottom: 0.12em solid #3f3554;
  background-color: rgba(26, 188, 156, 0.29);
  outline: none;
}

form input:focus {
  border-color: #f4c531;
}

form input:not(:last-child) {
  margin-bottom: 0.9em;
}

/* 调整 BaseButton 的上边距 */
form .base-button + .base-button {
  margin-top: 0.5em;
}
.success-message {
  position: relative;
  bottom: 33px;
  padding: 1em;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 0.5em;
  text-align: center;
  z-index: 1000;
}
</style>
